<template>
    <div>
        <el-input placeholder="请输入内容" v-model="searchContent" size="small" @keyup.native="handleFilterUser">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="user-list">
            <div class="user" v-for="(item,index) in sortedUserList" :key="index" @dblclick="chooseUser(item)"
                 v-if="sortedUserList.length">
                <div class="user-header">
                    <el-image class="image" :src="fileDownUrl+item.header"></el-image>
                </div>
                <div class="user-info">
                    <div class="user-name">
                        <i class="el-icon-male" v-if="item.sex ==='false'" style="font-size: 16px;color: #39a8ff"></i>
                        <i class="el-icon-female" v-else style="font-size: 16px;color: #ff38e2"></i>
                        <el-divider direction="vertical"></el-divider>&nbsp;
                        {{item.name}}
                    </div>
                    <div class="user-role-name" :title="item.signName">
                        {{item.signName}}
                    </div>
                </div>
                <div class="user-operate" style="visibility: hidden" @click.stop="chooseUser(item)">
                    聊天
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ContractUsers",
        props: {
            userList: {
                type: Array,
                default: []
            },
            fileDownUrl: {
                type: String,
                required: true
            }
        },
        computed: {
            sortedUserList: {
                get() {
                    if (this.userFilterList.length) {
                        return this.userFilterList ? _.orderBy(this.userFilterList, ['name'], ['asc']) : [];
                    } else if (!this.userFilterList.length && this.userList && this.userList) {
                        return _.orderBy(this.userList, ['name'], ['asc'])
                    } else {
                        return [];
                    }
                },
                set(val) {
                    this["userFilterList"] = val;
                }
            }
        },
        data() {
            return {
                searchContent: "",
                userFilterList: []
            }
        }, methods: {
            //选中用户
            chooseUser(param) {
                this.$emit("chooseUserCallBack", param);
            },
            //筛选用户
            handleFilterUser() {
                this.userFilterList = _.filter(this.userList, o => {
                    return o.name.indexOf(this.searchContent) > -1;
                });
                // this.$emit("filterUserCallBack", param);
            }
        }
    }
</script>

<style scoped lang="scss">
    /deep/ .el-input {
        /*position: relative;*/
        /*font-size: 14px;*/
        /*display: inline-block;*/
        /*width: 100%;*/
        text-align: center;

        /deep/ .el-input__prefix {
            top: 0;
            left: 70px;
        }

        /deep/ .el-input__inner {
            width: 75%;
            border-radius: 60px;
        }
    }

    .user-list {
        color: #333333;
        overflow-y: scroll;
        height: calc(100vh - 300px);

        .user:hover {
            cursor: pointer;
            background-color: rgba(12, 23, 35, 0.04);

            /*.user-operate {*/
            /*    background: #ffaa43;*/
            /*    overflow: hidden;*/
            /*    color: #ffffff;*/
            /*    text-align: center;*/
            /*    animation: user-operate-transmission 400ms;*/
            /*    -webkit-animation: user-operate-transmission 400ms;*/
            /*    animation-iteration-count: 1;*/
            /*    animation-fill-mode: forwards;*/
            /*}*/

            /*@keyframes user-operate-transmission {*/
            /*    from {*/
            /*        width: 40px;*/
            /*        visibility: hidden;*/
            /*        text-align: center;*/
            /*        height: 60px;*/
            /*        right: 0;*/
            /*    }*/
            /*    to {*/
            /*        width: 60px;*/
            /*        display: block;*/
            /*        height: 60px;*/
            /*        visibility: visible;*/
            /*        right: 100px;*/
            /*    }*/
            /*}*/
        }

        .user {
            display: flex;
            padding: 0 30px;
            border-bottom: 1px solid #f1f1f1;

            .user-header {
                height: 60px;
                width: 60px;
                border-radius: 60px;
                padding: 5px 5px;

                .image {
                    height: 45px;
                    width: 45px;
                    border-radius: 45px;
                }
            }

            .user-info {
                width: 76%;

                .user-name {
                    height: 26px;
                    line-height: 26px;
                    padding: 2px 2px 2px 5px;
                    font-size: 14px;
                }

                .user-role-name {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    padding-left: 5px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 13px;
                    color: #8c939d
                }
            }

            .user-msg-number {
                line-height: 60px;
            }

        }

        .user:last-child {
            border-bottom: 0 solid transparent;
        }
    }

    /*修改滚动条样式--start*/
    .user-list::-webkit-scrollbar {
        width: 5px;
        height: 10px;
        display: none;
    }

    .user-list::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
    }

    .user-list::-webkit-scrollbar-thumb {
        background: #bfbfbf;
        border-radius: 10px;
    }

    .user-list::-webkit-scrollbar-thumb:hover {
        background: rgba(39, 161, 255, 0.92);
    }

    .user-list::-webkit-scrollbar-corner {
        background: rgba(39, 161, 255, 0.92);
    }

    /*修改滚动条样式--end*/
</style>
